<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝+跨域封装</title>
	<script src="jquery-1.7.1.js"></script>
	<script type="text/javascript" src="MyAjax.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var btn = document.querySelector("#btn");
			btn.onclick = function(){
				var keywordValue = document.querySelector("#keyword").value;
				console.log(keywordValue);

			//使用jQuery来获取跨域的数据，
			//dataType:"jsonp"
			//key默认就是callback
			//value的值以jQuery开头的字符串，这个字符串就是函数调用的名称

			$.ajax({
				url:"https://suggest.taobao.com/sug",
				data:{q:keywordValue},
				success:function(data){
					var liTag = "";
					for(var i=0;i< data.result.length;i++){
						var temp = data.result[i];
						var tempSug= temp[0]; 
						liTag +="<li>"+tempSug+"</li>";
					}
					var ul = document.querySelector('ul');
					ul.innerHTML = liTag;
				},
				dataType:"jsonp",
			    jsonp:"callback",
			    jsonpCallback:"zxm",
			});





			// myAjax({
			// 	url:"https://suggest.taobao.com/sug",
			// 	data:{q:keywordValue},
			// //	jsonp:"callback",
			//     jsonpCallback:"zxm",
			// 	success:function(data){
			// 			var liTag = "";
			// 			for(var i=0;i< data.result.length;i++){
			// 				var temp = data.result[i];
			// 				var tempSug= temp[0]; 
			// 				liTag +="<li>"+tempSug+"</li>";
			// 			}
			// 			var ul = document.querySelector('ul');
			// 			ul.innerHTML = liTag;
			// 		}	
			// 	});
 
			};

		};

	</script>  
</head>
<body>
	<input type="text" id="keyword" placeholder="请输入关键字">
	<input type="button" id="btn" value="搜索">
	<ul>
	</ul>
	
</body>
</html>